<template>
  <view class="root">
    <view class="content">
      <yy-scroll-view
        :static-params="staticParams"
        ref="scrllViewRef"
        request-url="/missingAddressReporting/list"
        :auto-request="false"
      >
        <template slot-scope="{ list }">
          <view
            class="list-item"
            v-for="(item, index) in list"
            :key="index"
            @click="handleItem(item)"
          >
            <view class="item-top">
              <view class="title-name">{{ item.policeJurisdictionName }}</view>
            </view>
            <view class="item-content">
              <view class="i-label"> 地址描述: </view>
              <view class="i-value">
                {{ item.addressDescription }}
              </view>
            </view>
            <view class="item-content">
              <view class="i-label"> 上报时间: </view>
              <view class="i-value">
                {{ item.createTime }}
              </view>
            </view>
          </view>
        </template>
      </yy-scroll-view>
    </view>
    <view class="bottom">
      <u-button
        text="新增缺失地址"
        :custom-style="ColorButton"
        @click="handleAdd"
      ></u-button>
    </view>
  </view>
</template>

<script>
import {
  navTo,
  halfColorButton,
  ColorButton,
  Toast,
  getOptionsParams,
} from "@/utils/util.js";
import moment from "@/utils/moment";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      halfColorButton,
      ColorButton,
      staticParams: {},
    };
  },
  onLoad(options) {
    this.$refs.scrllViewRef.getList("init", this.staticParams);
    uni.$on("add-missing-address-add", () => {
      this.$refs.scrllViewRef.getList("init", this.staticParams);
    });
  },
  onUnload() {
    uni.$off("add-missing-address-add");
  },
  methods: {
    moment,
    handleAdd() {
      navTo({
        url: "/actual_real_estate/missingAddress/missingAddressAdd",
      });
    },
    handleItem(item) {
      navTo({
        url: "/actual_real_estate/missingAddress/missingAddressDetail",
        params: {
          ...item,
        },
      });
    },
  },
};
</script>

<style>
page {
  background: #f9f9f9;
}
</style>
<style lang="scss" scoped>
.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #f9f9f9;

  /deep/ .u-tabs {
    background: #fff;

    .u-tabs__wrapper__nav__line {
      background: linear-gradient(90deg, #51b1ff 0%, #1790f2 100%);
    }

    .u-tabs__wrapper__nav__item__text {
      font-weight: 500;
      font-size: 28rpx;
      color: #545454;
    }
  }

  .content {
    flex: 1;
    padding: 10rpx 15rpx;
    height: 0;

    .list-item {
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 36rpx 46rpx;
      margin-bottom: 10rpx;

      .item-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 26rpx;

        .title-name {
          font-weight: bold;
          font-size: 30rpx;
          color: #181818;
        }
      }

      .item-content {
        display: flex;

        .i-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #aaaaaa;
          margin-right: 16rpx;
          width: 120rpx;
        }

        .i-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
      }

      .item-content {
        font-weight: 400;
        font-size: 28rpx;
        color: #a1a1a1;
        margin-bottom: 26rpx;
      }

      .item-time {
        font-weight: 400;
        font-size: 26rpx;
        color: #aeaeae;
      }
    }
  }

  .bottom {
    height: 120rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;

    /deep/.u-button__text {
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}
</style>
